<template>
	<div class="app-container">
		<div class="content">
			<div class="navnum">
				<el-steps :active="1" finish-status="end" process-status='curt' class="nextnav"  simple>
				  <el-step title="导入文件" icon="iconfont icon-1" ></el-step>
				  <el-step title="批单校验" icon="iconfont icon-2"></el-step>
				  <el-step title="结算完成" icon="iconfont icon-3"></el-step>
				</el-steps>
				<div class="list-tab">
		          <div class="tab" @click="gopidan">上游保单结算</div>
		          <div class="tab now">上游批单结算</div>
		   	</div>
			</div>
			
			
			<div style="display:flex;justify-content: center;">
					<el-form label-width="100px" class="upendorse-form1 demo-ruleForm marginTop" :rules="rules" :model="formLabel"  ref="formLabel">
					<div class="form_top">
					<el-form-item label="保险公司：" class="is-required" prop="insuranceId">
						<el-select class="wd300" size="mini" v-model="formLabel.insuranceId" placeholder="请选择结算公司" @change="changeIns" >
							<el-option-group v-for="group in companies" :key="group.letter" :label="group.letter">
								<el-option v-for="item in group.insurances" :key="item.id" :label="item.insuranceName" :value="item.id">
								</el-option>
							</el-option-group>
						</el-select>
						<p class="modeP hei28">还没模板，马上<a class="acolor" :href="datasrc+'/Templates/批单模板表格.xlsx'">下载模板</a></p>
					</el-form-item>
					
					<el-form-item label="导入文件：" class="is-required" prop="filePath">
						<div>
							<el-input
							class="wd300"
							type="hidden"
							v-model="formLabel.filePath" style="display: none;">
							</el-input>
							<el-upload class="upload-demo"
								ref="uploadexcel"
								:action="action" 
								:headers="headers"
								:auto-upload='true' :on-success="loadSuc" :on-error='handleError' :on-remove="handleRemove" :before-remove="beforeRemove" :limit="1" :on-exceed="handleExceed" :file-list="fileList" :before-upload="beforeAvatarUpload" accept="excel/xls,excel/xlsx" :disabled="upbtndisabled">
								<el-button size="mini" :on-error='error' class="floatLeft" :disabled="upbtndisabled">
									<i class='el-icon-upload2'></i> 上传文件
								</el-button>
								<div slot="tip" class="el-upload__tip uploadTxt">支持格式：xlsx、xls</div>
							</el-upload>
						</div>
					</el-form-item>
					
					<div class="tablebox" v-show="lookedTableShow">
						<template>
							<el-table :data="tableData" style="width: 80%">
							<el-table-column  label="" width="160">
								<template slot-scope="scope">
									<span v-if="scope.row.exportType==0">正常批单数据</span>
									<span v-else-if="scope.row.exportType==1">系统无原保单号的批单数据</span>
									<span v-else-if="scope.row.exportType==2">已完成结算的批单数据</span>
									<span v-else>本次导入批单总数据</span>
								</template>
							</el-table-column>
							<el-table-column prop="count" label="条数" align="center"></el-table-column>
							<el-table-column label="操作" align="center">
								<template slot-scope="scope">
									<a class="acolor" :href="datasrc+scope.row.filePath">下载</a>
								</template>
							</el-table-column>			      
							</el-table>
						</template>
					</div>
					</div>
					
					
					
					<el-form-item class='btn-item'>
						<el-button type="primary" class="submitBtn" :loading='isloading' @click="toNext('formLabel')" size="small">下一步</el-button>
					</el-form-item>
					
					</el-form>
			</div>
			<!--<el-tabs type="border-card"  v-model="activeName" style='width:800px;margin:0 auto;min-height:550px;' @tab-click="handleClick">
				<el-tab-pane label="上游批单结算" name='up'>
					<el-form label-width="100px" class="upendorse-form1 demo-ruleForm marginTop" :rules="rules" :model="formLabel"  ref="formLabel">
					<div class="form_top">
					<el-form-item label="保险公司：" class="is-required" prop="insuranceId">
						<el-select class="wd300" size="mini" v-model="formLabel.insuranceId" placeholder="请选择结算公司" @change="changeIns" >
							<el-option-group v-for="group in companies" :key="group.letter" :label="group.letter">
								<el-option v-for="item in group.insurances" :key="item.id" :label="item.insuranceName" :value="item.id">
								</el-option>
							</el-option-group>
						</el-select>
						<p class="modeP hei28">还没模板，马上<a class="acolor" :href="datasrc+'/Templates/批单模板表格.xlsx'">下载模板</a></p>
					</el-form-item>
					
					<el-form-item label="导入文件：" class="is-required" prop="filePath">
						<div>
							<el-input
							class="wd300"
							type="hidden"
							v-model="formLabel.filePath" style="display: none;">
							</el-input>
							<el-upload class="upload-demo"
								ref="uploadexcel"
								:action="action" 
								:headers="headers"
								:auto-upload='true' :on-success="loadSuc" :on-error='handleError' :on-remove="handleRemove" :before-remove="beforeRemove" :limit="1" :on-exceed="handleExceed" :file-list="fileList" :before-upload="beforeAvatarUpload" accept="excel/xls,excel/xlsx" :disabled="upbtndisabled">
								<el-button size="mini" :on-error='error' class="floatLeft" :disabled="upbtndisabled">
									<i class='el-icon-upload2'></i> 上传文件
								</el-button>
								<div slot="tip" class="el-upload__tip uploadTxt">支持格式：xlsx、xls</div>
							</el-upload>
						</div>
					</el-form-item>
					
					<div class="tablebox" v-show="lookedTableShow">
						<template>
							<el-table :data="tableData" style="width: 80%">
							<el-table-column  label="" width="160">
								<template slot-scope="scope">
									<span v-if="scope.row.exportType==0">正常批单数据</span>
									<span v-else-if="scope.row.exportType==1">系统无原保单号的批单数据</span>
									<span v-else-if="scope.row.exportType==2">已完成结算的批单数据</span>
									<span v-else>本次导入批单总数据</span>
								</template>
							</el-table-column>
							<el-table-column prop="count" label="条数" align="center"></el-table-column>
							<el-table-column label="操作" align="center">
								<template slot-scope="scope">
									<a class="acolor" :href="datasrc+scope.row.filePath">下载</a>
								</template>
							</el-table-column>			      
							</el-table>
						</template>
					</div>
					</div>
					
					
					
					<el-form-item class='btn-item'>
						<el-button type="primary" class="submitBtn" :loading='isloading' @click="toNext('formLabel')" size="small">下一步</el-button>
					</el-form-item>
					
					</el-form>
				</el-tab-pane>
				<el-tab-pane label="下游批单结算" name='down'>
				</el-tab-pane>
			</el-tabs>-->
			<div style="height:100px;"></div>
			
		</div>
	</div>
</template>
<script>
import Vue from "vue";
import { getToken, removeToken } from "@/utils/auth";
export default {
  data() {
    return {
      isloading: false,
      value: null,
      formLabel: {
        insuranceId: "",
        filePath: ""
      },
      rules: {
        insuranceId: [
          {
            required: true,
            message: "请选择保险公司",
            trigger: "change"
          }
        ],
        filePath: [
          {
            required: true,
            message: "请导入文件",
            trigger: "change"
          }
        ]
      },
      companies: [],
      upbtndisabled: true, //上传文件是否可用
      btndisabled: true, //下一步按钮是否禁用
      savedisabled: true,
      tableData: [
        {
          name: "正常导入",
          count: 5
        },
        {
          name: "异常导入",
          count: 5
        },
        {
          name: "全部",
          count: 20
        }
      ], //预览列表数据
      lookedTableShow: false, //预览表格是否显示
      fileList: [],
      action: "",
      excelName: "", //导入的文件名字,
      filePath: "",
      getDay: "",
      istrue: false,
      datasrc: "",
      activeName: "up",
    };
  },
  computed: {
    headers() {
      return {
        Authorization: "Bearer " + getToken()
      };
    }
  },
  mounted() {
    this.getCompanies();
    this.datasrc = process.env.BASE_DOWN;
    if (this.formLabel.insuranceId) {
      this.upbtndisabled = false;
    } else {
      this.upbtndisabled = true;
    }
  },
  watch: {},
  methods: {
  	gopidan(){
  		this.$router.push({
					name:"uppersettle1"
				})
  	},
	handleClick(tab,event){
		console.log(tab);
		console.log(tab.name);
		if(tab.name == 'down')	{
			this.$router.push({
				name:'downendorsement1'
			})
		}		
	},
    //获取保险公司
    getCompanies() {
      const that = this;
      const params = {};
      this.post(params, "services/app/common/GetGroupInsurances").then(rs => {
        console.log(rs);
        if (rs.success) {
          that.companies = rs.result.items;
        }
      });
    },
    changeIns(val) {
      if (val) {
        this.upbtndisabled = false;
        ///api/services/UploadFileCorrectSettlements
        this.action =
          process.env.BASE_DOWN +
          "/api/services/UploadFileCorrectSettlements/?InsuranceId=" +
          val;
      }
    },
    // 下载模板
    downModal() {
      console.log(process.env.BASE_DOWN + "/Templates/批单模板表格.xlsx");
      window.location.href =
        process.env.BASE_DOWN + "/Templates/批单模板表格.xlsx";
      //datasrc+'/Templates/批单模板表格.xlsx'
    },
    // 下载表格
    downExcel(val) {
      window.location.href = process.env.BASE_DOWN + val;
    },
    //限制上传一个文件
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制上传1个文件`);
    },
    // 成功上传
    loadSuc(val) {
      console.log("shujushusju");
      console.log(val);
      if (val.state == 1) {
        this.$alert(val.errorMessage, "提示", {
          confirmButtonText: "确定",
          type: "warning"
        }).then(() => {});
        //清空上传列表
        this.$refs.uploadexcel.clearFiles();
        return;
      }
      this.istrue = true;
      val.items.forEach(item => {
        if (item.exportType == 0) {
          this.istrue = false;
          this.formLabel.filePath = item.filePath;
        } else {
          this.formLabel.filePath = item.filePath;
        }
      });
      // this.formLabel.filePath = val.filePath;

      this.tableData = val.items;
      console.log(111111111111);
      console.log(this.tableData);
      this.lookedTableShow = true;
      if (this.value != null) {
        this.btndisabled = false;
      } else {
        this.btndisabled = true;
      }
    },
    open4() {
      this.$message.error("错了哦，这是一条错误消息");
    },
    error() {
      this.open4();
    },
    beforeAvatarUpload(file) {
      let testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      const isexcel = testmsg === "xls";
      const excel = testmsg === "xlsx";
      console.log(file);
      if (!isexcel && !excel) {
        this.$confirm("上传文件暂时只支持xlsx和xls格式", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "error",
          callback: action => {
            this.$emit("closeEditUpload");
          }
        });
      }
      this.excelName = file.name;
      return isexcel || excel;
    },
    beforeRemove() {},
    handleRemove(file) {
      this.formLabel.filePath = "";
      this.lookedTableShow = false;
	},
	handleError(){
		this.$notify.error({
        title: "错误",
        message: '上传失败',
        //duration: 0,
        customClass: "el-notification-error"
      });
	},
    //保存失败提示
    failNot(message) {
      console.log(message);
      const h = this.$createElement;
      this.$notify.error({
        title: "错误",
        message: message,
        //duration: 0,
        customClass: "el-notification-error"
      });
    },
    //下一步
    toNext(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.istrue) {
            this.$message({
              message: "请选择未结算的批单文件",
              type: "warning"
            });
          } else {
            this.isloading = true;
            this.post(
              this.formLabel,
              "services/app/correctGuaranteeSlip/CreateCorrectTempData"
            ).then(res => {
              if (res.success) {
                this.isloading = false;
                console.log("success");
                console.log(res);
                this.$router.push({
                  name: "upperendorsement2",
                  query: {
                    id: res.result.batchId,
                    insuranceId: this.formLabel.insuranceId
                  }
                });
              } else {
                this.isloading = false;
                this.failNot(res.error.message);
              }
            });
          }
        } else {
          console.log(235);
          return false;
        }
      });
    }
  }
};
</script>

<style  lang="scss" scoped>
.marginTop{
	margin-top:30px;
}
.acolor {
  color: #027dca;
  cursor: pointer;
}
.navnum {
  margin-top: 55px;
  padding: 0 20px;
  margin-bottom: 20px;
}
.el-steps--simple {
  padding: 17px 8%;
}
.el-form {
  .form_top {
    width: 500px;
    // margin: 0 auto;
	
  }
  .modeP,
  .modeP_txt {
    display: inline-block;
  }
  .modeP_txt {
    margin-left: 106px;
    color: #cf1322;
    margin-top: -6px;
    margin-bottom: 0;
  }
  .wd300 {
    width: 300px;
  }
  .hei28 {
    height: 28px;
    line-height: 28px;
    padding: 0;
    margin: 0;
    color: #666;
    letter-spacing: 0;
    font-size: 12px;
    .acolor {
      color: #027dca;
    }
    .acolor:hover {
      text-decoration: underline;
    }
    .iconColor {
      color: #ff9430;
      cursor: pointer;
    }
  }
  .uploadTxt {
    display: inline-block;
    position: relative;
    top: -10px;
    margin-left: 20px;
    color: #666666;
    font-size: 13px;
  }
  .floatLeft {
    float: left;
    display: block;
  }
  .submitBtn {
    margin: 0 auto;
    margin-left: -100px;
  }
  .btn-item {
    margin-top: 60px;
    margin-bottom: 246px !important;
    text-align: center;
  }

  /*table样式*/
  .tablebox {
    margin-left: 100px;
    margin-top: 60px;
  }
}
.fontsize12 {
  font-size: 12px;
}
.demowp {
  /*margin-top: -22px;*/
  position: absolute;
  top: 26px;
}
.wd730 {
  width: 730px;
}
.dialogUl {
  margin: 0;
  padding: 0;
  background: #e4e4e4;
  overflow: hidden;
  height: 36px;
  line-height: 36px;
  font-size: 12px;
  li {
    display: block;
    width: 33.333%;
    padding: 0;
    box-sizing: border-box;
    float: left;
    text-align: center;
    font-size: 13px;
  }
}
.formInputWp {
  display: block;
  float: left;
  width: 33.333%;
  .form2Input {
    width: 90%;
    margin: 0 auto;
  }
}
.orangeColor {
  color: #ff9430;
}
.demo_dialog {
}
.demo_in {
  color: #999999;
  margin-top: 0;
  font-size: 13px;
  span {
    color: #333333;
  }
}
.zhu {
  color: #cf1322;
  font-size: 12px;
}
.last_border {
  border-bottom: 0;
}
.sysTable {
  height: 40px;
  line-height: 40px;
  background: #b9dbf0;
}
.list-table th {
  font-weight: 100;
  color: #333333;
  font-size: 13px;
  text-align: left;
  padding-left: 30px;
  box-sizing: border-box;
  padding-right: 10px;
}
.tableDiv_upset1 {
  padding: 0 20px;
}
.fileV {
  font-size: 13px;
  color: #666666;
}
.fileName {
  color: #151515;
}
.fileVerify {
  color: #cf1322;
}
.form2Inputred {
  width: 90%;
  margin: 0 auto;
}
.cursor {
  cursor: pointer;
}

.font13 {
  font-size: 13px;
}
.upload-demo {
  width: 300px !important;
}
.list-tab {
        padding: 0 20px;
        box-border: border;
        border-bottom: 1px solid #cbcbcb;
        margin-top:20px;
        .tab {
          display: inline-block;
          padding: 0 10px;
          line-height: 40px;
          text-align: center;
          color: #333;
          cursor: pointer;
          margin-bottom: -1px;
          span {
            color: #999;
          }
        }
        .now {
          color: #ff7819 !important;
          background: url(../../../assets/images/bomactive2x.png) center 32px
            no-repeat;
          span {
            color: #ff7819 !important;
          }
        }
      }
</style>

